<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="app">
	<!-- 1.插值 -->  
	<!--  在浏览器的开发者工具的控制台中输入 v.info="333" 会发现网页的这个{{}}位置的值会跟着发生改变 -->
    {{info}}
	<!-- 2.文本绑定 -->
	<!--  v-text：让元素的义本内容和变量进行绑定-->
	<p v-text="info"></p>		<!--  v-html：让元素的html标签内容和受量进行绑定，浏览器解折后展示-->	<p v-html="info"></p>
	<!-- 3.属性绑定 -->
	<input  v-bind:value="info"/>  <br/>
	<input  :value="info"/>  <br/>
	<a v-bind:href="url">百度</a>
	<a :href="url">百度</a><br/>
	<img v-bind:src="imgUrl">
	<img :src="imgUrl"><br />
	
	<!-- 4.双向绑定 -->
	<!--v-model="变量" 双向绑定, 让控件和变量进行双向绑定
	双向绑定主要应用在控件之中, 当需要获取用户输入的某些内容时使用-->
	<!--  在浏览器的开发者工具的控制台中输入 v.info="333" 会发现网页对应的输入框的值会跟着发生改变 -->
	<!-- 在网页双向绑定的输入框中输入数值，然后在开发者工具的控制台中用console.log(v.info);打印变量的结果，可以看到变量的值会跟着发生改变 -->
	<input type="text" v-model="info"><br />
	<h1>注册页面</h1>
	  用户名:<input type="text" v-model="user.username" placeholder="请输入用户名"><br>
	  密码:<input type="password" v-model="user.password" placeholder="请输入密码"><br>
	<!-- 5.事件绑定  -->
	<input type="button"  value="按钮1"  v-on:click="f1()" />
	<input type="button"  value="按钮1"  @click="f2()" />
  </div>
</body>
  <!-- import Vue before Element -->
  <!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
  <script src="vue.min.js"></script>
  <script>
	//VUE对象相当于是MVVM设计模式中的VM视图模型，
    let v=new Vue({
      el: 'body>div',
	  //l在doto甲而配置和页而进行绑定的变量，	  //l配置完之后vue对象会对这里面的变量进行监听
      data: function() {
        return { 
			info: "helloVue",
			url: "http://www.baidu.com",
			imgUrl: "img/02.png",
			user:{username:"",password:""}
		}
      },
	  methods:{
		  f1(){
			  alert("点击了按钮1");
		  },
		  f2(){
			  alert("点击了按钮2");
		  }
	  }
    })
	//如果在浏览器的开发者工具的控制台，输入v.info="abc"   再回车就可以看法页码的值发生了改变
  </script>
</html>